<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome</title>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script type="text/javascript"
	src="<s:url value="/javascript/jquery-1.4.2.min.js"/>"></script>
<script type="text/javascript"
	src="<s:url value="/javascript/jquery.colorbox-min.js"/>"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".jumpSaveUser").colorbox( {
			href : 'jumpSaveUser.action'
		});
	});
</script>
<style type="text/css">
caption {
	padding: 0 0 5px 0;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

table,td {
	font: 12px Arial, Helvetica, sans-serif;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

th,td {
	text-align: left;
	padding: .5em;
	border: 1px solid #fff;
}

th {
	background: #328aa4 url(tr_back.gif) repeat-x;
	color: #fff;
}

td {
	background: #e5f1f4;
}

/* tablecloth styles */
tr.even td {
	background: #e5f1f4;
}

tr.odd td {
	background: #f8fbfc;
}

th.over,tr.even th.over,tr.odd th.over {
	background: #4a98af;
}

th.down,tr.even th.down,tr.odd th.down {
	background: #bce774;
}

th.selected,tr.even th.selected,tr.odd th.selected {
	
}

td.over,tr.even td.over,tr.odd td.over {
	background: #ecfbd4;
}

td.down,tr.even td.down,tr.odd td.down {
	background: #bce774;
	color: #fff;
}

td.selected,tr.even td.selected,tr.odd td.selected {
	background: #bce774;
	color: #555;
}

/* use this if you want to apply different styleing to empty table cells*/
td.empty,tr.odd td.empty,tr.even td.empty {
	background: #fff;
}
</style>
</head>
<body>
<div id="login_info" style="width: 100%; border: 1px solid silver;">
<ul style="list-style-type: none;">
	<li style="float: left;">Welcome!
	${sessionScope.sessionUser.userName}</li>
	<li style=""><a href="logout.action">Logout</a></li>
</ul>
</div>

<table>
	<caption>Main Content</caption>
	<tr>
		<th>User</th>
		<th>Card</th>
		<th>Group</th>
		<th>Upload</th>
		<th>Ajax</th>
	</tr>


	<tr>
		<td><a href="jumpSaveUser.action">jumpSaveUser</a></td>
		<td><a
			href="jumpSaveCard.action?id=${sessionScope.sessionUser.id }">jumpSaveCard</a></td>
		<td><a href="jumpSaveGroup.action">jumpSaveGroup</a></td>
		<td><a href="jumpUpload.action">uploadFile</a></td>
		<td><a href="jumpAjaxPage.action">jumpAjaxPage</a></td>
	</tr>


	<tr>
		<td><a
			href="jumpGetUser.action?id=${sessionScope.sessionUser.id }">jumpUpdateUser</a></td>
		<td><a
			href="listCard.action?user.id=${sessionScope.sessionUser.id }">listCard</a></td>
		<td><a href="jumpListGroup.action">jumpListGroup</a></td>
		<td>...</td>
		<td><a href="jumpJsTree.action">jumpJsTree</a></td>
	</tr>

	<tr>
		<td><a class="jumpSaveUser" href="#">jquery - jumpSaveUser</a></td>
		<td>...</td>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>

	<tr>
		<td><a
			href="jumpSaveUserGroup.action?userId=${sessionScope.sessionUser.id }">jumpSaveUserGroup</a></td>
		<td>...</td>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>

</table>

</body>
</html>